<template>
  <transition name="slide">
    <div class="mint-pull">
      <van-nav-bar title="MintPull" leftText="返回" leftArrow @click-left="onClickLeft" @click-right="onClickRight" />
      <div class="scroll-wrapper">
        <mt-loadmore :top-method="loadTop" topPullText="下拉即可刷新..." topDropText="释放即可刷新..." :bottom-all-loaded="allLoaded" ref="loadmore">
          <ul>
            <li v-for="(item, index) in list" :key="index">{{ item }}</li>
          </ul>
        </mt-loadmore>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data () {
    return {
      list: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
      allLoaded: false
    }
  },
  mounted () {
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    onClickRight () {
    },
    loadTop () {
      setTimeout(() => {
        this.list.push(1)
        this.$refs.loadmore.onTopLoaded()
      }, 1500)
    }
  }
}
</script>

<style lang="less">
.mint-pull {
  position: fixed;
  z-index: 101;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #f0f0f0;
  &.slide-enter-active,
  &.slide-leave-active {
    transition: all 0.3s;
  }
  &.slide-enter,
  &.slide-leave-to {
    transform: translate3d(100%, 0, 0);
  }
  .scroll-wrapper {
    position: fixed;
    top: 46px;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #ffffff;

    .mint-loadmore {
      height: 100%;
    }
  }
}
</style>
